<template>
    <div>
        <div class="discover-list" v-for="(item,index) in listData" :key="index">
            <div v-if="((item.isColumn * 1 !== 1) && (item.layout * 1 === 1)) || isRecList">
                <a href="#" @click.stop.prevent="checkLoginDetail(item)" class="link-block" >
                    <ul class="flex list-layout-1">
                        <li>
                            <h3 class="title line-clamp">
                                {{item.title}}
                            </h3>
                            <div class="details">
                                <span class="to-top" :class="{'display-none': ((!item.isTopFlag) || isRecList)}">
                                    <img src="../../../assets/image/newdiscover/totop.png"/>
                                </span>
                                <span :class="{'display-none': isRecList}">{{item.artColumTitle}}</span>
                                <span>{{item.pageView | pageViewFormat}}</span>
                                <span>{{item.publishDate | dateFormat}}</span>
                            </div>
                        </li>
                        <li>
                            <img :src="item.images[0]">
                        </li>
                    </ul>
                </a>
            </div>
            <div class="list-layout-3" v-if="(item.isColumn * 1 !== 1) && (item.layout * 1 === 3)">
                <a href="#" @click.stop.prevent="checkLoginDetail(item)" class="link-block" >
                    <h3 class="title">{{item.title}}</h3>
                    <ul class="flex img-list">
                        <li v-for="(subItem, subIndex) in item.images.slice(0, 3)"><img :src="subItem" /></li>
                    </ul>
                    <div class="details">
                        <span class="to-top" :class="{'display-none': !item.isTopFlag}">
                            <img src="../../../assets/image/newdiscover/totop.png"/>
                        </span>
                        <span>{{item.artColumTitle}}</span>
                        <span>{{item.pageView | pageViewFormat}}</span>
                        <span>{{item.publishDate | dateFormat}}</span>
                    </div>
                </a>
            </div>
            <div class="column-wrapper" v-if="item.isColumn * 1 === 1 && item.columnRef.length > 0">
                <div class="flex column-title">
                    <p>{{item.artColumTitle}}</p>
                    <a href="#" @click="goToList(item)">查看全部</a>
                </div>
                <div class="column-gallery">
                    <ul class="flex">
                        <li v-for="(subItem, subIndex) in item.columnRef" class="column-lists">
                            <a  href="#" @click.stop.prevent="checkLoginDetail(subItem)" class="link-block">
                                <img :src="subItem.images[0]">
                                <h3 class="title line-clamp">{{subItem.title}}</h3>
                                <h4 class="title line-clamp">{{subItem.subTitle}}</h4>
                            </a>
                        </li>
                        <li class="white-width">&nbsp;</li>
                    </ul>
                    <div class="white-mask"></div>
                </div>
            </div>
            <div class="adv" v-if="(item.isColumn * 1 !== 1) && item.layout * 1 === 4">
                <a href="#" @click.stop.prevent="checkLoginDetail(item)" ><img :src="item.images[0]" /></a>
            </div>
            <div class="list-layout-0" v-if="(item.isColumn * 1 !== 1) && item.layout * 1 === 0">
                <a href="#" @click.stop.prevent="checkLoginDetail(item)" class="link-block" >
                    <h3 class="title">{{item.title}}</h3>
                    <div class="img-show"><img :src="item.images[0]"/></div>
                    <div class="details">
                        <span class="to-top" :class="{'display-none': !item.isTopFlag}">
                            <img src="../../../assets/image/newdiscover/totop.png"/>
                        </span>
                        <span>{{item.artColumTitle}}</span>
                        <span>{{item.pageView | pageViewFormat}}</span>
                        <span>{{item.publishDate | dateFormat}}</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    import common from '../../../assets/js/common';
    Vue.filter('pageViewFormat', (val) => {
        let status = '';
        let million = 0;
        let millionArr = null;
        if (val) {
            val *= 1;
            if (val >= 10000) {
                million = (val / 10000).toFixed(1);
                millionArr = million.split('.');
                if (millionArr[1] > 0) {
                    return (val/10000).toFixed(1) + '万';
                } else {
                    return (val/10000).toFixed(0) + '万';
                }
            } else {
                return val;
            }
        } else {
            return '0';
        }
    });

    Vue.filter('dateFormat',(val) => {
        let str = null;
        let curYear = (new Date().getFullYear());
        if (val) {
            str = val.split(/-|\s/);
            str.pop();
            if (str[0] == curYear) {
                str.shift();
                return str.join('-');
            } else {
                return str.join('-');
            }
        } else {
            return '';
        }
    });

    Vue.filter('dateFormatTime',(val) => {
        let str = null;
        let curYear = (new Date().getFullYear());
        if (val) {
            str = val.split(/-|\s/);
            let times = (str.pop()).split(':');
            times.pop();
            if (str[0] == curYear) {
                str.shift();
            }
            return str.join('-') + ' ' + times.join(':');
        } else {
            return '';
        }
    });
    export default {
        props: ['listData', 'isRecList', 'basicInfo'],
        data() {
            return {
                postfix: null,
                deviceId: null
            };
        },
        mounted() {
            if (common.isApp()) {
                lb.getDeviceInfo((res) => {
                    // 获取设备id
                    if (res.errorCode == '0') {
                        this.deviceId = res.text.deviceId;
                    }
                });
            }
        },
        methods: {
            checkLoginDetail(item) {
                let hostName = window.location.origin;
                let postfix = common.isHtml();
                let preUrl = hostName + '/newdiscover/detail/detail.html?id='+item.id+'&artcolumn='+item.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+ this.basicInfo.plateformType+'&citycode='+ this.basicInfo.cityCode + '&deviceid=' + this.deviceId;
                let prdUrl = hostName + '/cx/cxj/cxjweb/newdiscover/detail/detail.shtml?id='+item.id+'&artcolumn='+item.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+ this.basicInfo.plateformType+'&citycode='+ this.basicInfo.cityCode  + '&deviceid=' + this.deviceId;
                if (common.isApp()) {
                    // action 为空 || 开头为 CXJSAYCARSDETAIL 跳转到详情页
                    if ((!item.action) || /^CXJSAYCARSDETAIL/.test(item.action)) {
                        if (postfix === 'html') {
                            window.location.href = preUrl;
                        } else {
                            lb.newWebview({'url': prdUrl});
                        }
                    } else {
                        lb.newWebview({'url': (hostName + '/service/dispacher/0?id=' + item.action)});
                    }
                } else {
                    // action 为空 || 开头为 CXJSAYCARSDETAIL 跳转到详情页
                    if ((!item.action) || /^CXJSAYCARSDETAIL/.test(item.action)) {
                        if (postfix === 'html') {
                            window.location.href = preUrl;
                        } else {
                            window.location.href = prdUrl;
                        }
                    } else {
                        window.location.href =  (hostName + '/service/dispacher/0?id=' + item.action);
                    }
                }
            },
            goToList(item) {
                let hostName = window.location.origin;
                let preUrl = hostName + '/newdiscover/list/list.html?artcolumn='+item.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+ this.basicInfo.plateformType+'&citycode='+ this.basicInfo.cityCode;
                let prdUrl = hostName + '/cx/cxj/cxjweb/newdiscover/list/list.shtml?artcolumn='+item.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+ this.basicInfo.plateformType+'&citycode='+ this.basicInfo.cityCode;
                if (common.isApp()) {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        lb.newWebview({'url': prdUrl});
                    }
                } else {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        window.location.href = prdUrl;
                    }
                }
            }
        }
    };
</script>

<style lang="scss">
    .flex {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: stretch;
    }
    .discover-list {
        .line-clamp {
            text-overflow: ellipsis;
            display: box;
            box-orient: vertical;
            line-clamp: 2;
            overflow: hidden;
        }
        a.link-block {
            display: block;
            height: 100%;
            text-decoration: none;
            &:link { }
            &:visited {
                h3 {
                    color:#666!important;
                    text-decoration: underline!important;
                }
            }
            &:hover{},
            &:active{
            }
        }
        h3.title {
            color: #000;
            font-size: 1.7rem;
            font-weight: 400;
        }
        h4.title {
            color: #666;
        }
        .details {
            span {
                display: inline-block;
                padding: 0 1rem 0 1.8rem;
                color: #666;
                font-size: 1.1rem;
            }
            span:nth-of-type(2) {
                background: url('../../../assets/image/newdiscover/label.png') left center no-repeat;
                background-size: contain;
            }
            span:nth-of-type(3) {
                background: url('../../../assets/image/newdiscover/see.png') left center no-repeat;
                background-size: contain;
            }
            span:nth-of-type(4) {
                background: url('../../../assets/image/newdiscover/time.png') left center no-repeat;
                background-size: contain;
            }
            span.to-top {
                height: 2rem;
                margin-right: 0.3rem;
                padding:0 0.2rem;
                border-radius: 2px;
                background: none;
                color: #4a90e2;
                font-size: 0.9rem;
                img {
                    height: 100%;
                }
            }
            span.display-none {
                display: none;
            }
        }
        .list-layout-1 {
            position: relative;
            margin-top: -1px;
            padding: 1.5rem ;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
            li:nth-of-type(1) {
                width: 67%;
                flex: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-between;
                h3 {
                    padding-right: 1.2rem;
                }
            }
            li:nth-of-type(2) {
                width: 33%;
                flex: 0 0 11.2rem;
                height: 7.5rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .list-layout-3 {
            margin-top: -1px;
            padding: 0 1.5rem;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
            h3.title{
                overflow: hidden;
                padding: 1.5rem 0;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .img-list {
                li {
                    flex: 1 0 0;
                    -webkit-box-flex: 1;
                    padding-right: 0.5rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    &:last-child {
                        padding-right: 0;
                    }
                }
            }
            .details{
                padding: 1.5rem 0;
            }
        }
        .column-wrapper {
            position: relative;
            overflow: hidden;
            margin: 0.75rem 0;
            padding-bottom: 1.4rem;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
            .column-title {
               align-items: center;
               overflow: hidden;
               padding: 1.5rem;
               color: #000;
               font-size: 1.5rem;
               p{
                   font-weight: 400;
               }
               a {
                    padding-right: 1.75rem;
                    background: url('../../../assets/image/newdiscover/arrow.png') no-repeat right center;
                    background-size: auto 1.2rem;
                    color: #888;
                    text-align: right;
                    font-size: 1.3rem;
                }
            }
            .column-gallery {
                overflow: hidden;
                margin-bottom: -16px;
                ul {
                    overflow-x: auto;
                    overflow-y: hidden;
                    -webkit-overflow-scrolling:touch;
                    padding: 0 1.5rem 15px 1.5rem;
                    li.column-lists{
                        width: 22.5rem;
                        flex: 0 0 22.5rem;
                        margin-right: 0.6rem;
                        border: 1px solid #e5e5e5;
                        word-wrap: break-word;
                        word-break: break-all;
                        white-space: normal;
                        img {
                            width: 100%;
                            height: 15rem;
                        }
                        &:last-child {
                            border-right: 1px solid #e5e5e5;
                            margin-right: 1.5rem;
                        }
                        h3 {
                            padding: 1rem;
                            font-size: 1.5rem;
                        }
                        h4 {
                            padding: 0 1rem 1rem 1rem;
                            font-size: 1.3rem;
                        }
                    }
                    li.white-width {
                        width: 1.5rem;
                    }
                }
            }
            .white-mask {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 5px;
                background: #fff;
            }
        }
        .adv {
            margin-top: -1px;
            padding: 1.5rem 0;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
            img {
                width: 100%;
            }
        }
        .list-layout-0 {
            margin-top: -1px;
            padding: 1.5rem;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
            .img-show {
                padding: 1.5rem 0;
                img {
                    width: 100%;
                }
            }
        }
    }
</style>
